<template>
    <!-- 申请提现 -->
    <div class="w750">
        <!-- 提现 -->
        <div :class="themes.theme">
            <div class="withdraw">
                <div class="withdraw-con" v-if="getStep">
                    <div class="arriveAccount">
                        <div class="arrive-top">
                            <div class="arrive-top-left">到账账户</div>
                            <div class="arrive-top-right" @click="goChooseAccount">
                                <span class="right-text" v-if="accountMessage.defaultAccountType">
                                    <!-- <img src="" /> -->
                                    {{
                                        accountMessage.defaultAccountType == 'BANK_CARD'
                                            ? accountMessage.bankName
                                            : accountMessage.weChatName
                                            ? accountMessage.weChatName
                                            : '微信钱包'
                                    }}
                                    <template v-if="accountMessage.defaultAccountType == 'BANK_CARD'">
                                        (尾号 {{ accountMessage.bankCardNumber | strEndFour }})
                                    </template>
                                </span>
                                <span class="right-text" v-else>请添加</span>
                                <div class="arr">
                                    <img src="@/assets/images/arrow.png" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="arrive-bottom" v-if="accountMessage.defaultAccountType">
                            {{
                                accountMessage.defaultAccountType == 'BANK_CARD'
                                    ? '发起提现需1-3个工作日到账'
                                    : '发起提现需核实微信账户，3-5个工作日到账'
                            }}
                        </div>
                    </div>

                    <div class="w-tit">提现金额</div>
                    <div class="w-con">
                        <span class="symbol">￥</span>
                        <input type="text" class="w-input" v-model="wantGet" />
                    </div>
                    <div class="w-des">手续费：{{ serviceCharge }}元， 预计到账金额：{{ (wantGet - serviceCharge).toFixed(2) }}元</div>
                    <div class="w-des">
                        可提现金额￥{{ Money(accountMessage.amount)[0] }}.{{ Money(accountMessage.amount)[1] }}，
                        <em class="w-btn" @click="allGet">全部提现</em>
                    </div>
                </div>

                <div class="d-flex flex-column mt-1 px-1 font-12 text-999">
                    <span class="font-14 text-333 py">温馨提示</span>
                    <span class="py">最低提现金额{{ accountMessage.withdrawSetting.withdrawalLowest }}元</span>
                    <span class="py">单笔最高可提现{{ accountMessage.withdrawSetting.withdrawalHighest }}元</span>
                    <span class="py" v-if="accountMessage.withdrawSetting.withdrawalMultipleType != '0'">
                        提现金额仅支持{{
                            accountMessage.withdrawSetting.withdrawalMultipleType == '10'
                                ? accountMessage.withdrawSetting.withdrawalLowest
                                : accountMessage.withdrawSetting.withdrawalMultipleValue
                        }}元的倍数，望谅解
                    </span>
                    <!-- <span class="py">收取提现手续费{{ accountMessage.withdrawSetting.withdrawalCharge }}%，实际到账金额为扣除手续费后金额</span> -->
                    <span class="py">{{ accountMessage.feeCopy }}</span>
                    <span class="py">每月{{ withdrawalDateList[0] }}-{{ withdrawalDateList[1] }}日开放提现</span>
                </div>

                <div class="withdraw-result" v-if="!getStep">
                    <div class="process cur">1、您的提现申请已经提交</div>
                    <div class="process cur">2、等待商家处理</div>
                    <div class="process">3、店家会通过您选择的到账方式为您打款</div>
                </div>
                <div class="b-btn" @click="applyWithward" v-if="getStep">
                    <span class="btn-a btn-r" :style="{ background: inWithdrawalDay ? '#999' : '' }">确认提现</span>
                </div>
                <div class="b-btn" v-if="!getStep" @click="backPage">
                    <span class="btn-a btn-r">确认</span>
                </div>

                <div class="tips-cont" v-if="getStep">
                    <span class="text" @click="goWithdrawProblem">相关问题</span>
                    <span class="spacer"></span>
                    <span class="text" @click="goextensionWithdraw">提现记录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import cash from 'utils/tool'
import { toApplyCash, applyCash } from 'api/extensionApi'
import { Dialog } from 'vant'

export default {
    data() {
        return {
            Money: cash, //价格转换
            getStep: true,
            cash: '',
            wantGet: 0,
            // this.accountMessage.amount: 0, //可提现的最大金额
            // defaultAccountType: '',
            bankName: '',
            showDialog: false // 提现dialog
        }
    },
    watch: {
        // 判断输入的提现金额
        wantGet(newVal, oldVal) {
            if (newVal < 0) {
                this.$toast({ duration: 1000, message: '提现金额必须大于0' })
                this.wantGet = 0
            } else if (newVal > this.accountMessage.amount) {
                this.wantGet = newVal
                this.$toast({ duration: 1000, message: '不能大于最大可提现金额' })
            } else if (!/^\d+(\.\d{0,2})?$/.test(newVal)) {
                if (newVal) {
                    this.wantGet = oldVal
                }
            }
        }
    },
    mounted() {
        const flag = sessionStorage.getItem('flag')
        // 判断是否选择过银行卡
        if (!flag) {
            this.gettoApplyCash()
            this.accountMessage.flag = true
            this.$store.dispatch('setAccountMessage', {
                ...this.accountMessage,
                ...(this.accountMessage.flag = true)
            })
            return
        }
        // 获取缓存的金额
        this.wantGet=sessionStorage.getItem('wantGet')
        sessionStorage.removeItem('flag')
        sessionStorage.removeItem('wantGet')
        
    },

    // beforeRouteEnter(to, from, next) {
    //     next((vm) => {
    //         if (vm.accountMessage.flag) {
    //             ;(from.path == '/applyExtension' || from.path == '/' || from.path == '/withdrawalResult') && vm.gettoApplyCash()
    //         }
    //     })
    // },
    computed: {
        ...mapState(['themes', 'accountMessage']),
        // 提现日期范围
        withdrawalDateList() {
            return JSON.parse(this.accountMessage.withdrawSetting.withdrawalDate)
        },
        // 手续费计算
        serviceCharge() {
            return ((this.wantGet * this.accountMessage.withdrawSetting.withdrawalCharge) / 100).toFixed(2)
        },
        // 是否在提现日期 false => 在/ true => 不在
        inWithdrawalDay() {
            const nowDay = new Date().getDate()
            return nowDay < this.withdrawalDateList[0] || nowDay > this.withdrawalDateList[1]
        }
    },
    methods: {
        gettoApplyCash(params) {
            toApplyCash({
                channel: 'H5',
                ...params
            }).then((res) => {
                if (res.status == 1) {
                    res.result.flag = true
                    this.$store.dispatch('setAccountMessage', res.result)
                } else {
                    this.$toast({ duration: 1000, message: res.msg })
                }
            })
        },

        //全部提现
        allGet() {
            this.wantGet = this.accountMessage.amount
        },

        //确认提现
        applyWithward() {
            this.$toast.loading({
                mask: true,
                forbidClick: true,
                message: '提现中...'
            }) //防连续点击

            // 判断是否在提现日
            const nowDay = new Date().getDate()
            if (nowDay < this.withdrawalDateList[0] || nowDay > this.withdrawalDateList[1]) {
                this.$toast('当前日期不在提现日期当中')
                return
            }

            if (!this.accountMessage.defaultAccountType) {
                this.$toast('请去选择到账类型方式')
                return
            }

            if (this.wantGet === '') {
                this.$toast('提现金额不能空')
                return
            }
            if (this.wantGet == 0) {
                this.$toast('提现金额不能为0')
                return
            }

            if (this.wantGet < this.accountMessage.withdrawSetting.withdrawalLowest) {
                this.$toast(`最低提现${this.accountMessage.withdrawSetting.withdrawalLowest}元`)
                return
            }

            if (this.wantGet > this.accountMessage.withdrawSetting.withdrawalHighest) {
                this.$toast(`最多提现${this.accountMessage.withdrawSetting.withdrawalHighest}元`)
                return
            }

            // 提现金额倍数限制
            if (this.accountMessage.withdrawSetting.withdrawalMultipleType != '0') {
                if (
                    this.accountMessage.withdrawSetting.withdrawalMultipleType == '10' &&
                    this.wantGet % this.accountMessage.withdrawSetting.withdrawalLowest != 0
                ) {
                    this.$toast(`请输入${this.accountMessage.withdrawSetting.withdrawalLowest}的倍数`)
                    return
                }

                if (
                    this.accountMessage.withdrawSetting.withdrawalMultipleType == '20' &&
                    this.wantGet % this.accountMessage.withdrawSetting.withdrawalMultipleValue != 0
                ) {
                    this.$toast(`请输入${this.accountMessage.withdrawSetting.withdrawalMultipleValue}的倍数`)
                    return
                }
            }

            if (this.wantGet > this.accountMessage.amount) {
                this.$toast('提现金额不能大于最大可提现金额')
                return
            }

            let props = {
                amount: this.wantGet,
                receiverAccountType: this.accountMessage.defaultAccountType,
                channel: 'H5',
                withdrawalCharge: this.accountMessage.withdrawSetting.withdrawalCharge
            }

            if (this.accountMessage.defaultAccountType != 'WECHAT_WALLET') {
                props.bankCardId = this.accountMessage.bankCardId
            }

            // 确认是否提现
            Dialog.confirm({
                title: '提示',
                message: `预计到账金额：${(this.wantGet - this.serviceCharge).toFixed(2)}元，手续费：${this.serviceCharge}元\n您确认要提现吗？`
            })
                .then(() => {
                    applyCash(props)
                        .then((res) => {
                            if (res.status == 1) {
                                this.$toast.clear()

                                this.$router.push({
                                    path: '/withdrawalResult',
                                    query: {
                                        withdrawSn: res.result
                                    }
                                })
                                this.$store.dispatch('setAccountMessage', {
                                    ...this.accountMessage,
                                    ...(this.accountMessage.flag = true)
                                })
                            } else {
                                this.$toast(res.msg)
                            }
                        })
                        .catch((e) => {
                            this.$toast.clear()
                        })
                })
                .catch(() => {
                    // on cancel
                })
        },

        goWithdrawProblem() {
            this.$router.push({
                path: `/withdrawProblem`
            })
        },
        //提醒记录
        goextensionWithdraw() {
            this.$router.push({
                path: `/myExtension/extensionWithdraw`
            })
        },
        //添加银行卡

        goChooseAccount() {
            // 缓存提现金额
            sessionStorage.setItem('wantGet',this.wantGet)
            let props = {
                path: '/chooseAccount'
            }

            let params = null

            if (this.accountMessage.bankCardId) {
                params = {
                    query: {
                        bankCardId: this.accountMessage.bankCardId
                    }
                }
                params = { ...props, ...params }
            }

            if (this.accountMessage.defaultAccountType == 'WECHAT_WALLET') {
                params = {
                    query: {
                        defaultAccountType: this.accountMessage.defaultAccountType
                    }
                }
                params = { ...props, ...params }
            }

            this.$router.push(params ? params : props)
        },
        backPage() {
            this.$router.back()
            this.$router.isBack = true
        }
    }
}
</script>

<style src="../../../assets/css/style/my-style.css" scoped></style>
<style src="../../../assets/css/pre-deposit.css" scoped></style>
<style scoped>
.p {
    color: #4eae31;
    text-align: center;
    font-size: small;
    margin-top: 8px;
}

/* 提现 */
.withdraw .withdraw-con {
    /* padding: 15px 10px 10px; */
    background: #ffffff;
}
.withdraw .withdraw-con .w-tit {
    font-size: 14px;
    line-height: 24px;
    padding: 0 10px 10px;
}
.withdraw .withdraw-con .w-con {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f8f8f8;
}
.withdraw .withdraw-con .w-con .symbol {
    font-size: 30px;
    font-family: arial;
    display: block;
    height: 55px;
    line-height: 50px;
    font-weight: 600;
}
.withdraw .withdraw-con .w-con .w-input {
    font-size: 48px;
    font-family: arial;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    height: 55px;
    line-height: 55px;
    margin-left: 3px;
    overflow: hidden;
}
.withdraw .withdraw-con .w-des {
    color: #999999;
    font-size: 12px;
    height: 29px;
    line-height: 24px;
    margin: 10px 0 0;
    padding-left: 10px;
}
.withdraw .withdraw-con .w-des .w-btn {
    padding: 0 5px;
    cursor: pointer;
}
/* end 提现 */

/* 提现结果 */
.withdraw .withdraw-result {
    padding: 5px 10px 10px;
    background: #ffffff;
}
.withdraw .withdraw-result .process {
    color: #999999;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 5px;
    padding: 10px 0;
    border-bottom: 1px dashed #dddddd;
}
/* end 提现结果 */

.arriveAccount {
    width: 100%;
    margin-bottom: 10px;
    background-color: rgb(250, 250, 250);
    padding: 0 10px;
}
.arriveAccount .arrive-top {
    display: flex;
}
.arriveAccount .arrive-top .arrive-top-left,
.arriveAccount .arrive-top .arrive-top-right {
    font-size: 0.28rem;
    padding: 15px 0 15px 0;
}

.arriveAccount .arrive-top .arrive-top-right {
    margin-left: auto;
}

.arriveAccount .arrive-top .arrive-top-right .arr {
    display: inline-block;
    vertical-align: middle;
    width: 0.16rem;
    height: 0.16rem;
    margin-top: -0.04rem;
    margin-left: 0.15rem;
    margin-right: 0.22rem;
}
.arriveAccount .arrive-top .arrive-top-right .arr img {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.arrive-bottom {
    font-size: 0.24rem;
    color: #999999;
}

.arrive-bottom {
    padding: 0 0.3rem 0.2rem 0;
}

.tips-cont {
    text-align: center;
    font-size: 0.24rem;
    color: rgb(91, 161, 234);
}

.tips-cont .text {
    margin: 0 0.15rem;
}

.tips-cont .spacer {
    overflow: hidden;
    margin: 11px 5px 0;
    width: 1px;
    height: 10px;
    background-color: #ccc;
    display: inline-block;
}
</style>
